.main {
  .titt {
    width: 400px;
    height: 39px;
    background: url('../img/index/titt.png');
    background-size: 100% 100%;
    font-size: 16px;
    color: #fff;
    padding-left: 27px;
    padding-right: 20px;
    line-height: 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .tittTime {
      padding-top: 3px;
      font-size: 12px;
      opacity: .5;
    }
  }

  .mainLeft {
    .mainLeftOne {
      padding: 15px 35px 0 12px;

      .box1 {
        width: 100%;
        display: flex;
        position: relative;

        .box1BS {
          position: absolute;
          bottom: -15px;
          left: 0;
          width: 100%;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-left: 30px;
          padding-right: 15px;

          .row {
            display: flex;
            align-items: center;

            &>div {
              width: 17px;
              height: 7px;
              background-color: #37F4E9;
              margin-right: 5px;
            }

            &>span {
              color: #fff;
              font-size: 12px;
            }

            &:nth-of-type(2) {
              &>div {
                background-color: #FFE459;
              }
            }

            &:nth-of-type(3) {
              &>div {
                background-color: #FF9A3E;
              }
            }

            &:nth-of-type(4) {
              &>div {
                background-color: #FF4949;
              }
            }
          }
        }

        .box1ll {
          width: 130px;
          height: 138px;
          margin-right: 20px;
          position: relative;

          .box1ZT {
            z-index: 99;
            position: absolute;
            top: 70px;
            left: 50%;
            transform: translateX(-50%);
            width: 38px;
            height: 14px;
            border-radius: 2px;
            background-color: #37F4E9;
            color: #16625D;
            font-size: 12px;
            text-align: center;
            line-height: 14px;
          }

          .box1Day {
            z-index: 99;
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            color: #fff;
            font-size: 12px;
            text-align: center;
          }

          #echBox1 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
          }
        }

        .box1rr {
          flex: 1;

          .box1DayNum {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
          }

          .box1SeaTime {
            height: 22px;
            display: flex;
            justify-content: flex-end;
            font-size: 12px;

            &>span {
              color: #fff;
              opacity: 0.5;
              margin-left: 10px;
              cursor: pointer;
            }

            .active {
              opacity: 1;
              pointer-events: none;
              border-bottom: 2px solid #37F4E9;
            }
          }

          .box1XianBai {
            margin-top: 5px;
            &>div {
              font-size: 12px;
              color: #fff;

              .row {
                display: flex;
                align-items: center;
                justify-content: space-between;
              }

              .sqiTxt {
                font-size: 18px;
                font-weight: 700;
              }

              .box1Xian {
                overflow: hidden;
                position: relative;
                margin: 8px 0 10px;
                width: 100%;
                height: 3px;
                border-radius: 2px;
                background-color: rgba(255, 255, 255, .5);

                &>div {
                  transition: all .5s;
                  position: absolute;
                  top: 0;
                  left: 0;
                  height: 100%;
                }

                .box1XianS1 {
                  width: 20%;
                  background-color: #37F4E9;
                }

                .box1XianS2 {
                  width: 50%;
                  background-color: #FFE459;
                }

                .box1XianS3 {
                  width: 70%;
                  background-color: #FF4949;
                }
              }
            }
          }
        }
      }
    }

    .mainLeftTow {
      padding: 25px 0 0 12px;

      .box2ll {
        margin-top: -30px;
        position: relative;
        width: 100%;
        height: 240px;

        #echBox2 {
          width: 100%;
          height: 100%;
        }

        .box2BS {
          // cursor: pointer;
          z-index: 99;
          position: absolute;
          bottom: -20px;
          left: 0;
          width: 100%;
          height: 18px;
          display: flex;
          align-items: center;
          justify-content: space-around;
          padding: 0 15px;

          .box2BSRow {
            width: 17px;
            height: 7px;
            background-color: #37F4E9;

            &:nth-of-type(2) {
              background-color: #FFE459;
            }

            &:nth-of-type(3) {
              background-color: #FF9A3E;
            }

            &:nth-of-type(4) {
              background-color: #FF4949;
            }
          }

          &>span {
            display: block;
            margin-right: 15px;
            font-size: 12px;
            color: #fff;

            &:last-child {
              margin-right: 0;
            }
          }
        }
      }
    }

    .mainLeftThree {
      padding: 45px 0 0 12px;

      .box3 {
        display: flex;

        .box3ll {
          padding-left: 10px;
          width: 110px;
          color: #fff;

          .box3llTop {
            margin: 12px 0 8px;
            font-size: 14px;
          }

          .box3llRow {
            padding-right: 10px;

            &>p {
              font-size: 12px;
              opacity: .7;
            }

            &>div {
              position: relative;
              width: 100%;
              height: 2px;
              margin: 10px 0 10px;

              &>span {
                position: absolute;
                right: -18px;
                top: -8px;
                font-size: 12px;
                color: #58E3EB;
              }

              .xian {
                transition: all .5s;

                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-image: linear-gradient(to right, rgba(33, 116, 121, 0.4), rgba(90, 229, 238, 1));

                &::before {
                  content: '';
                  position: absolute;
                  top: -1px;
                  left: 0;
                  width: 1px;
                  height: 4px;
                  background-color: #fff;
                }
              }

              .xian2 {
                width: 0%;
              }

              .xian3 {
                width: 0%;
              }

              .xian4 {
                width: 0%;
              }
            }
          }
        }

        .box3rr {
          position: relative;
          color: #fff;
          padding-right: 30px;
          flex: 1;

          .box3rrTop {
            font-size: 14px;
            padding-left: 55px;
            margin: 12px 0 8px;
          }

          #echBox3 {
            width: 100%;
            height: 130px;
          }

          .box3Txt {
            position: absolute;
            bottom: 0px;
            left: 0;
            width: 100%;
            font-size: 12px;
            text-align: center;

            &>p {
              &>span {
                font-size: 14px;
                font-weight: 700;
              }
            }
          }
        }
      }

      .box4 {
        color: #fff;
        margin-top: 20px;
        position: relative;

        .box4tit {
          font-size: 14px;
          padding-left: 10px;
        }

        #echBox4 {
          width: 100%;
          height: 230px;
        }

        .box4Unit {
          position: absolute;
          left: 10px;
          top: 22px;
          font-size: 12px;
        }
      }
    }
  }

  .mainRight {
    .mainRightOne {
      position: relative;
      padding: 15px 35px 0 12px;
      height: 300px;

      .boxR1 {
        margin-top: 15px;
        display: flex;
        justify-content: space-around;
        color: #fff;

        &>div {
          display: flex;
          flex-direction: column;

          &>p {
            font-size: 12px;
          }

          &>span {
            font-size: 35px;
            font-weight: 700;
          }
        }
      }

      #echBox5 {
        position: absolute;
        top: 85px;
        left: 0;
        width: 100%;
        height: 260px;
        // background-color: #FF9A3E;
      }
    }

    .mainRightTow {
      position: relative;
      padding: 25px 0 0 12px;
      width: 100%;
      height: 320px;

      #echBox6 {
        position: absolute;
        top: 30px;
        left: 0;
        width: 100%;
        height: 300px;
      }
    }

    .mainRightThree {
      padding: 25px 20px 0 12px;

      .tableTop {
        padding: 10px 0px 0 3px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        color: #fff;
        font-size: 12px;

        &>div {
          opacity: .7;
          cursor: pointer;
        }

        .active {
          opacity: 1;
          font-weight: 700px;
          font-size: 14px;
          position: relative;
          pointer-events: none;
          &::before {
            content: '';
            width: 100%;
            max-width: 58px;
            height: 3px;
            background-color: #37F4E9;
            position: absolute;
            bottom: -3px;
            left: 50%;
            transform: translateX(-50%);
          }
        }
      }

      .tableHade {
        padding-right: 3px;
        margin-top: 15px;
        font-size: 14PX;
        font-weight: 700;
        color: #FFF;
        display: flex;
        justify-content: space-around;

        &>div {
          text-align: center;
          width: 70px;
        }

        .row1 {
          width: 50px;
          text-align: center;
        }

        .row2 {
          width: 130px;
        }
      }

      .tableMain::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 2px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
      }

      .tableMain::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #37F4E9;
      }

      .tableMain::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
        border-radius: 10px;
        background: transparent;
      }

      .tableMain {
        height: 250px;
        overflow-y: auto;
        padding-bottom: 15px;

        .row {
          margin-top: 10px;
          font-size: 12PX;
          color: #FFF;
          display: flex;
          justify-content: space-around;
          align-items: center;

          &>div {
            text-align: center;
            width: 70px;
          }

          .row1 {
            width: 50px;
            text-align: center;
          }

          .row2 {
            width: 120px;
          }

        }
        .erhua{
          color: #FF4949 !important;
        }
        .haozhuan{
          color: #37F4E9 !important;
        }

      }
    }
  }
}